<template>
    <div class="train-info-container">
        <div class="tags-group" v-for="category in items_title" :key="category.categoryName">
            <el-tag class="tags-group-title" size="mini">{{ category.categoryName }}:</el-tag>
            <el-tag class="tags-group-item" size="mini" v-for="label in category.labelDTOList" :key="label.id"
                type="success" effect="plain" @click="labelClick(label.id)">
                {{ label.labelName }}
            </el-tag>
        </div>
        <el-divider></el-divider>
        <div class="article-item" v-for="article in articles" :key="article.id">
            <router-link :to="{ name: 'TrainDetail', params: { id: id+'-'+article.id } }" target="_blank" class="title">
                <h2 style="margin-left: 10px;">{{ article.subjectName }}</h2>
            </router-link>
            <el-tag class="tags-group-item" size="mini" v-for="label in article.labelName" :key="label" type="success"
                effect="plain">
                {{ label }}
            </el-tag>
            <div class="article-content">
                <el-button @click="favorite(article)" type="text">
                    <i class="el-icon-star-off"></i>
                </el-button>
                <span>122</span>
                <el-divider direction="vertical"></el-divider>
                <el-button @click="favorite(article)" type="text">
                    <i class="el-icon-thumb"></i>
                </el-button>
                <span>122</span>
                <el-divider direction="vertical"></el-divider>
                <i class="el-icon-view"></i>
                <span>{{article.subjectViews}}</span>
                <el-divider direction="vertical"></el-divider>
                <i class="el-icon-user"></i>
                <span>{{article.settleName}}</span>
                <el-divider direction="vertical"></el-divider>
                <i class="el-icon-time"></i>
                <span>{{ $moment(article.createdTime).format('YYYY-MM-DD') }}</span>
            </div>
            <el-divider></el-divider>
        </div>
        <div class="study-pagination">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="currentPage1" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize"
                layout="sizes, prev, pager, next" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import TrainInfoApi from '@/api/trainInfo';

export default {
    props: {
        id: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            page: {},
            pageData: null,
            pageSize: 10,
            total: null,
            currentPage1: 1,
            subjectCategoryDTO: {},
            subjectLabelDTO: {},
            SubjectInfoDTO: {},
            labels: [],
            items_title: [],
            categoryIds: [],
            labelIds: [],
            articles: [],
        }
    },

    // computed: {
    //     ...mapState(['categoryIds', 'labelIds']), // 映射状态
    // },
    methods: {
        // ...mapActions(['updateCategoryIds', 'updateLabelIds']), // 映射 actions
        handleSizeChange(val) {
            this.pageSize = val;
            this.page = { pageNo: this.currentPage1, pageSize: val, categoryIds: this.categoryIds, labelIds: this.labelIds };
            console.log(`每页 ${val} 条`);
            this.getSubjectPage(this.page);
        },
        handleCurrentChange(val) {
            this.currentPage1 = val;
            this.page = { pageNo: val, pageSize: this.pageSize, categoryIds: this.categoryIds, labelIds: this.labelIds };
            console.log(`当前页: ${val}`);
            this.getSubjectPage(this.page);
        },
        //点击标签
        labelClick(labelId) {
            //清空本地缓存
            localStorage.removeItem(this.id +'labelIds');
            this.labelIds = [labelId];
            this.page = { pageNo: 1, pageSize: this.pageSize, categoryIds: this.categoryIds, labelIds: this.labelIds };
            this.getSubjectPage(this.page);
            localStorage.setItem(this.id + 'labelIds', JSON.stringify(this.labelIds));
        },
        //获取题目分类及标签
        async queryCategoryByPrimary(subjectCategoryDTO) {
            //清空本地缓存
            localStorage.removeItem(this.id +'categoryIds');
            localStorage.removeItem(this.id +'labelIds');
            try {
                const res = await TrainInfoApi.queryCategoryByPrimary(subjectCategoryDTO);// 传入当前页数据
                this.items_title = res; // 将获取的数据存储在组件的状态中
                this.categoryIds = this.items_title.map(item => item.id); // 分类id列表
                this.labelIds = this.items_title.reduce((acc, item) => { // 合并标签id列表
                    return acc.concat(item.labelDTOList.map(label => label.id));
                }, []);  // 标签id列表
                this.getSubjectPage({ pageNo: 1, pageSize: this.pageSize, categoryIds: this.categoryIds, labelIds: this.labelIds });
                //存入本地缓存
                localStorage.setItem(this.id + 'categoryIds', JSON.stringify(this.categoryIds));
                localStorage.setItem(this.id + 'labelIds', JSON.stringify(this.labelIds));
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
        // 根据题目分类和标签id获取题目列表
        async getSubjectPage(SubjectInfoDTO) {
            try {
                const res = await TrainInfoApi.getSubjectPage(SubjectInfoDTO);// 传入当前页数据
                // this.pageData = res; // 将获取的数据存储在组件的状态中
                this.total = res.total; // 总条数
                this.articles = res.result; // 题目列表
                // console.log("获取题目成功:", this.articles);
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
    },
    // 组件创建完成后执行
    mounted() {
        if (this.id === 0) {
            this.queryCategoryByPrimary({ "categoryType": 2 });
            this.getSubjectPage({ pageNo: 1, pageSize: this.pageSize, categoryIds: this.categoryIds, labelIds: this.labelIds });
        } else {
            this.queryCategoryByPrimary({ "parentId": this.id, "categoryType": 2 });
        }

    },
}
</script>

<style scoped>
.tags-group {
    /* display: inline-block; */
    margin-left: 10px;
    /* background-color: aqua; */
}

.tags-group-title {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.tags-group-item {
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.article-content {
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    font-size: 10px;
    /* background-color: aqua; */
}

.article-item {
    margin-top: 10px;
    margin-bottom: 10px;
}

.title {
    text-decoration: none;
}
</style>